doctype html
html(lang='en')

    head

        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
        meta(name='description', content='')
        meta(name='author', content='')

        title Landing Page - Start Bootstrap Theme

        // Favicon
        link(rel='icon', type='image/x-icon', href='assets/favicon.ico')

        // Bootstrap icons
        link(href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css', rel='stylesheet', type='text/css')

        // Google fonts
        link(href='https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic', rel='stylesheet', type='text/css')

        // Core theme CSS (includes Bootstrap)
        link(href='css/styles.css', rel='stylesheet')

    body

        // Navigation
        nav.navbar.navbar-light.bg-light.static-top
            .container
                a.navbar-brand(href='#!') Start Bootstrap
                a.btn.btn-primary(href='#signup') Sign Up

        // Masthead
        header.masthead
            .container.position-relative
                .row.justify-content-center
                    .col-xl-6
                        .text-center.text-white
                            // Page heading
                            h1.mb-5 Generate more leads with a professional landing page!

                            // Signup form

                            // * * * * * * * * * * * * * * *
                            // * * SB Forms Contact Form * *
                            // * * * * * * * * * * * * * * *

                            // This form is pre-integrated with SB Forms.
                            // To make this form functional, sign up at
                            // https://startbootstrap.com/solution/contact-forms
                            // to get an API token!

                            form.form-subscribe#contactForm(data-sb-form-api-token='API_TOKEN')

                                // Email address input
                                .row
                                    .col
                                        input#emailAddress.form-control.form-control-lg(type='email' placeholder='Email Address' data-sb-validations='required,email')
                                        .invalid-feedback.text-white(data-sb-feedback='emailAddress:required')
                                            | Email Address is required.
                                        .invalid-feedback.text-white(data-sb-feedback='emailAddress:email')
                                            | Email Address Email is not valid.

                                    .col-auto
                                        button#submitButton.btn.btn-primary.btn-lg.disabled(type='submit') Submit

                                // Submit success message
                                //
                                // This is what your users will see when the form
                                // has successfully submitted

                                #submitSuccessMessage.d-none
                                    .text-center.mb-3
                                        .fw-bolder Form submission successful!
                                        p To activate this form, sign up at
                                        a.text-white(href='https://startbootstrap.com/solution/contact-forms') https://startbootstrap.com/solution/contact-forms

                                // Submit error message
                                //
                                // This is what your users will see when there is
                                // an error submitting the form

                                #submitErrorMessage.d-none
                                    .text-center.text-danger.mb-3 Error sending message!

        // Icons Grid
        section.features-icons.bg-light.text-center
            .container
                .row
                    .col-lg-4
                        .features-icons-item.mx-auto.mb-5.mb-lg-0.mb-lg-3
                            .features-icons-icon.d-flex
                                i.bi-window.m-auto.text-primary
                            h3 Fully Responsive
                            p.lead.mb-0 This theme will look great on any device, no matter the size!
                    .col-lg-4
                        .features-icons-item.mx-auto.mb-5.mb-lg-0.mb-lg-3
                            .features-icons-icon.d-flex
                                i.bi-layers.m-auto.text-primary
                            h3 Bootstrap 5 Ready
                            p.lead.mb-0 Featuring the latest build of the new Bootstrap 5 framework!
                    .col-lg-4
                        .features-icons-item.mx-auto.mb-0.mb-lg-3
                            .features-icons-icon.d-flex
                                i.bi-terminal.m-auto.text-primary
                            h3 Easy to Use
                            p.lead.mb-0 Ready to use with your own content, or customize the source files!

        // Image Showcases
        section.showcase
            .container-fluid.p-0
                .row.g-0
                    .col-lg-6.order-lg-2.text-white.showcase-img(style="background-image: url('assets/img/bg-showcase-1.jpg');")
                    .col-lg-6.order-lg-1.my-auto.showcase-text
                        h2 Fully Responsive Design
                        p.lead.mb-0
                            | When you use a theme created by Start Bootstrap, you know that the theme will look great on any device, whether it's a phone, tablet, or desktop the page will behave responsively!
                .row.g-0
                    .col-lg-6.text-white.showcase-img(style="background-image: url('assets/img/bg-showcase-2.jpg');")
                    .col-lg-6.my-auto.showcase-text
                        h2 Updated For Bootstrap 5
                        p.lead.mb-0
                            | Newly improved, and full of great utility classes, Bootstrap 5 is leading the way in mobile responsive web development! All of the themes on Start Bootstrap are now using Bootstrap 5!
                .row.g-0
                    .col-lg-6.order-lg-2.text-white.showcase-img(style="background-image: url('assets/img/bg-showcase-3.jpg');")
                    .col-lg-6.order-lg-1.my-auto.showcase-text
                        h2 Easy to Use & Customize
                        p.lead.mb-0
                            | Landing Page is just HTML and CSS with a splash of SCSS for users who demand some deeper customization options. Out of the box, just add your content and images, and your new landing page will be ready to go!

        // Testimonials
        section.testimonials.text-center.bg-light
            .container
                h2.mb-5 What people are saying...
                .row
                    .col-lg-4
                        .testimonial-item.mx-auto.mb-5.mb-lg-0
                            img.img-fluid.rounded-circle.mb-3(src='assets/img/testimonials-1.jpg', alt='...')
                            h5 Margaret E.
                            p.font-weight-light.mb-0 "This is fantastic! Thanks so much guys!"
                    .col-lg-4
                        .testimonial-item.mx-auto.mb-5.mb-lg-0
                            img.img-fluid.rounded-circle.mb-3(src='assets/img/testimonials-2.jpg', alt='...')
                            h5 Fred S.
                            p.font-weight-light.mb-0
                                | "Bootstrap is amazing. I've been using it to create lots of super nice landing pages."
                    .col-lg-4
                        .testimonial-item.mx-auto.mb-5.mb-lg-0
                            img.img-fluid.rounded-circle.mb-3(src='assets/img/testimonials-3.jpg', alt='...')
                            h5 Sarah W.
                            p.font-weight-light.mb-0 "Thanks so much for making these free resources available to us!"

        // Call to Action
        section#signup.call-to-action.text-white.text-center
            .container.position-relative
                .row.justify-content-center
                    .col-xl-6
                        h2.mb-4 Ready to get started? Sign up now!
                        // Signup form
                        
                        // * * * * * * * * * * * * * * *
                        // * * SB Forms Contact Form * *
                        // * * * * * * * * * * * * * * *

                        // This form is pre-integrated with SB Forms.
                        // To make this form functional, sign up at
                        // https://startbootstrap.com/solution/contact-forms
                        // to get an API token!

                        form.form-subscribe#contactFormFooter(data-sb-form-api-token='API_TOKEN')

                            // Email address input
                            .row
                                .col
                                    input#emailAddressBelow.form-control.form-control-lg(type='email' placeholder='Email Address' data-sb-validations='required,email')
                                    .invalid-feedback.text-white(data-sb-feedback='emailAddressBelow:required')
                                        | Email Address is required.
                                    .invalid-feedback.text-white(data-sb-feedback='emailAddressBelow:email')
                                        | Email Address Email is not valid.

                                .col-auto
                                    button#submitButton.btn.btn-primary.btn-lg.disabled(type='submit') Submit

                            // Submit success message
                            //
                            // This is what your users will see when the form
                            // has successfully submitted

                            #submitSuccessMessage.d-none
                                .text-center.mb-3
                                    .fw-bolder Form submission successful!
                                    p To activate this form, sign up at
                                    a.text-white(href='https://startbootstrap.com/solution/contact-forms') https://startbootstrap.com/solution/contact-forms

                            // Submit error message
                            //
                            // This is what your users will see when there is
                            // an error submitting the form

                            #submitErrorMessage.d-none
                                .text-center.text-danger.mb-3 Error sending message!

        // Footer
        footer.footer.bg-light
            .container
                .row
                    .col-lg-6.h-100.text-center.text-lg-start.my-auto
                        ul.list-inline.mb-2
                            li.list-inline-item
                                a(href='#!') About
                            li.list-inline-item ⋅
                            li.list-inline-item
                                a(href='#!') Contact
                            li.list-inline-item ⋅
                            li.list-inline-item
                                a(href='#!') Terms of Use
                            li.list-inline-item ⋅
                            li.list-inline-item
                                a(href='#!') Privacy Policy
                        p.text-muted.small.mb-4.mb-lg-0 &copy; Your Website 2023. All Rights Reserved.
                    .col-lg-6.h-100.text-center.text-lg-end.my-auto
                        ul.list-inline.mb-0
                            li.list-inline-item.me-4
                                a(href='#!')
                                    i.bi-facebook.fs-3
                            li.list-inline-item.me-4
                                a(href='#!')
                                    i.bi-twitter.fs-3
                            li.list-inline-item
                                a(href='#!')
                                    i.bi-instagram.fs-3

        // Bootstrap core JS
        script(src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js')

        // Core theme JS
        script(src='js/scripts.js')

        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
        // * *                               SB Forms JS                               * *
        // * * Activate your form at https://startbootstrap.com/solution/contact-forms * *
        // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

        script(src='https://cdn.startbootstrap.com/sb-forms-latest.js')